<template>
    <div class="wrong-box" v-for="item in cuoList" :key="item.id">
        <van-swipe-cell style="margin-top: 10px">
            <div class="ll" @click="toxq(item.id)">
                <van-tag type="primary" size="medium">{{ item.grade }}</van-tag>
                <van-tag plain type="primary" size="medium">{{ item.subject }}</van-tag>
                <img alt="" :src=item.src />
            </div>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="todel(item.id)" />
            </template>
        </van-swipe-cell>
    </div>
    <van-icon name="add" color="#1989fa" size="60" class="tianjia" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'
import { showConfirmDialog } from 'vant';
import { useRouter } from "vue-router";
import { showSuccessToast, showFailToast } from 'vant';
// 引入图片数据
import c1 from '../img/cuoimg/c1.jpg'
import c2 from '../img/cuoimg/c2.jpg'
import c3 from '../img/cuoimg/c3-1.png'
import c4 from '../img/cuoimg/c4.jpg'
import c5 from '../img/cuoimg/c5-1.png'
import d1 from '../img/cuoimg/d1.jpg'
import d2 from '../img/cuoimg/d2.jpg'
import d3 from '../img/cuoimg/d3.jpg'
import d4 from '../img/cuoimg/d4.jpg'
import d5 from '../img/cuoimg/d5.jpg'
import x2 from '../img/cuoimg/c2-1.jpg'
import x3 from '../img/cuoimg/c3.jpg'
import x5 from '../img/cuoimg/c5.jpg'

const router = useRouter()

interface ICuoList {
    id: number,
    src: string,
    grade: string,
    subject: string,
    img1: string,
    daan: string,
}
let cuoList: Ref<Array<ICuoList>> = ref([
    {
        id: 1,
        src: c1,
        grade: '高一',
        subject: '数学',
        img1: c1,
        daan: d1,
    },
    {
        id: 2,
        src: c2,
        grade: '九年级',
        subject: '英语',
        img1: x2,
        daan: d2,
    },
    {
        id: 3,
        src: c3,
        grade: '高二',
        subject: '化学',
        img1: x3,
        daan: d3,
    },
    {
        id: 4,
        src: c4,
        grade: '七年级',
        subject: '地理',
        img1: c4,
        daan: d4,
    },
    {
        id: 5,
        src: c5,
        grade: '八年级',
        subject: '政治',
        img1: x5,
        daan: d5,
    },
])

window.localStorage.setItem('cuolist', JSON.stringify(cuoList.value))

function toxq(itemID) {
    window.localStorage.setItem('itemid', itemID)
    router.push('/wrxiangq')
}

function todel(itemId) {

    showConfirmDialog({
        message: '确认删除这道题目吗？',
    })
    .then(() => {
        cuoList.value = cuoList.value.filter(item => {
            return itemId !== item.id
        })       
    })
    .catch(() => { });
}

</script>

<style scoped lang="scss">
.ll {
    width: 100%;
    height: 200pxpx;
    border: 1px solid black;
}

img {
    width: 100%;
    height: 160px;
}

.delete-button {
    height: 100%;
}

.tianjia {
    position: fixed;
    right: 10px;
    bottom: 30px;
}
</style>
